<template>
  <ul class='list'>
    <li v-for="(item,index) in getListData" @click="showMoreInfo(item)">
      <img class="fl" :src="item.img" alt="">
      <div class="content pr">
        <p class="title">姓名：<span class="color999">{{item.name}}</span></p>
        <p class="info">电话：<span class="color999">{{item.phone | formatphone}}</span></p>
        <span v-show="item.state==0" class="pa right btn-active" @click.stop="sendnow(item,index)">派发 <img :src="imgs.send" alt=""> </span>

      </div>
    </li>
  </ul>
</template>
<script>
export default {
  props:["data"],
  components: {},
  name: "",
  data() {
    return {
      imgs:{
        send:require('../../../assets/img/works/card/1.png')
      },
    };
  },
  computed:{
    getListData(){
      return this.data
    }
  },
  filters:{
    formatphone(val){
      return val.slice(0,3)+" "+val.slice(3,7)+" "+val.slice(7)
    }
  },
  methods: {
    showMoreInfo(item){
      // sessionStorage.setItem("userId",item.id)
      // this.$router.push("/works/customer/detail")
    },

    sendnow(item,index){
      var params={
        userIds:item.id,
        couponId:sessionStorage.getItem("detailId")
      }
      _g.apiPost("couponApp/distributeCoupon.do",params).then(res=>{
        _g.toMessage(res)
        if(res.status==0)this.data.splice(index,1)
      })
    }
  },
  created() {}
};
</script>
<style lang="scss" scoped>
.list {
  margin: 0 15px;

  li{
    padding: 15px 0;
    min-height: 50px;
    border-bottom: 1px solid #f2f2f2;

    img{
      display: inline-block;
      width: 50px;
      height: 50px;
      border-radius: 50%;
    }
    p{
      margin: 5px 0 5px 65px;
      color: #333;
    }

    .info{
      margin-right: 20px;
    }
    .right{
      right: 0;
      width: 60px;
      height: 25px;
      font-size: 12px;
      // border: 1px solid transparent;
      background: linear-gradient(left bottom,#FF6613,#FFA200);
      background: -webkit-gradient(linear, left bottom, right top, from(#FF6613), to(#FFA200));
      box-sizing: border-box;
      border-radius: 13px;
      top: 50%;
      text-indent: 5px;
      line-height: 25px;
      color: #fff;
      transform: translateY(-50%);

      img{
        width: 20px;
        height: 20px;
        z-index: 100px;
        position: absolute;
        right: 5px;
        top: 50%;
        transform: translateY(-50%);
      }
    }
  }
}
</style>